﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">jqxRibbon Fluid Size Example. The width of the ribbon in this
        demo is in Percentages.</title>
    <meta name="description" content="jqxRibbon Fluid Size Example. The width of the ribbon in this demo is in Percentages." />
    <link type="text/css" rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <style type="text/css">
        table
        {
            border-collapse: separate;
            border-spacing: 15px 5px;
        }
    </style>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxribbon.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#jqxRibbon").jqxRibbon({ selectedIndex: 0, width: "100%", height: 350, position: "top", selectionMode: "click", animationType: "fade" });
        });
    </script>
</head>
<body>
    <div id="jqxRibbon">
        <ul>
            <li style="margin-left:30px;">Browse Books</li>
            <li>Shipping</li>
            <li>About Us</li>
        </ul>
        <div>
            <div>
                <table style="width:100%;">
                    <tr>
                        <td>
                            <b>Fiction</b>
                        </td>
                        <td>
                            <b>Biography</b>
                        </td>
                        <td>
                            <b>Science</b>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Adventure</a>
                        </td>
                        <td>
                            <a href="#">Biography: General</a>
                        </td>
                        <td>
                            <a href="#">Astronomy</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Classics</a>
                        </td>
                        <td>
                            <a href="#">Diaries, Letters & Journals</a>
                        </td>
                        <td>
                            <a href="#">Biology</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Historical Fiction</a>
                        </td>
                        <td>
                            <a href="#">Memoirs</a>
                        </td>
                        <td>
                            <a href="#">Geography</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Romance</a>
                        </td>
                        <td>
                            <b>Food & Drink</b>
                        </td>
                        <td>
                            <a href="#">Mathematics</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Science Fiction</a>
                        </td>
                        <td>
                            <a href="#">General Cookery</a>
                        </td>
                        <td>
                            <a href="#">Physics</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Thrillers</a>
                        </td>
                        <td>
                            <a href="#">National Cuisine</a>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <a href="#">Quick & Easy Cooking</a>
                        </td>
                        <td>
                        </td>
                    </tr>
                    <tr>
                        <td>
                        </td>
                        <td>
                            <a href="#">Vegetarian Cookery</a>
                        </td>
                        <td>
                            <a href="#">More books >></a>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <table style="width:100%;">
                    <tr>
                        <td>
                            <a href="#">Countries we ship to</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Delivery options</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Order cancellation and returns</a>
                        </td>
                    </tr>
                </table>
            </div>
            <div>
                <table style="width:100%;">
                    <tr>
                        <td>
                            <a href="#">Contact us</a>
                        </td>
                        <td rowspan="3" style="width: 125px;">
                        </td>
                        <td rowspan="3">
                            <img src="../../images/bookshop.png" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Jobs</a>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <a href="#">Affiliates</a>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>
